<template>
	<view class="my">
		<view class="top flex_box flex_between">
			<view class="flex_box gap20">
				<u-image src="/static/test/default_avatar.png" shape="circle" width="120rpx" height="120rpx"/>
				<view class="flex_box flex_direction gap20 flex_start">
					<u-text :text="userInfo.uname" v-if="loginStatus"></u-text>
					<view class="idinfo" v-if="loginStatus">用户ID: {{userInfo.userid_int}}</view>
					<view class="idinfo" v-else @click="toLogin">去登陆</view>
				</view>
			</view>
			<view>
				<u-icon name="setting-fill" size="28"></u-icon>
			</view>
		</view>
		<view class="middle flex_box gap100 flex_around">
			<u-button class="flex_box flex_direction u-reset-button" open-type="contact">
				<u-icon name="kefu-ermai" size="30"></u-icon>
				<text class="tip-title">帮助</text>
			</u-button>
			<view class="flex_box flex_direction" @click="goBuy">
				<u-icon name="file-text" size="30"></u-icon>
				<text class="tip-title">我的已购</text>
			</view>
			<!--#ifdef H5-->
			<view class="flex_box flex_direction">
				<u-icon name="weixin-fill" size="30"></u-icon>
				<text class="tip-title">微信小程序</text>
			</view>
			<!--#endif-->
		</view>
		<view class="mt20">
			<view class="make-list">
				<view class="empty-data" v-if="list.length == 0">
					<u-empty mode="data" text="尚未创建邀请函"></u-empty>
					<view class="mt20 make-btn flex_box flex_center">
						<u-button text="去制作" shape="circle" color="#ff344c"></u-button>
					</view>
				</view>
				<view v-else class="item mt20" v-for="(item, index) in list" :key="index">
					<view class="item-image flex_box gap20 flex_start">
						<u-image :src="item.image" width="220rpx" height="300rpx" radius="30rpx"/>
						<view class="flex_box flex_direction gap20 flex_start">
							<text class="title">{{item.name}}</text>
							<view class="tag-box flex_box mt20">
								<u-tag :text="item.type == 1 ? '翻页' : '图片'" bgColor="#fcf2f1" color="#ce5260" borderColor="#fcf2f1"></u-tag>
							</view>
							<text class="mt20 time">{{item.create_time}}</text>
						</view>
					</view>
					<view class="bottom flex_box flex_around">
						<view class="flex_box flex_direction opt">
							<u-icon name="edit-pen" size="30" color="#373637"></u-icon>
							<text>编辑</text>
						</view>
						<view class="flex_box flex_direction opt">
							<u-icon name="eye" size="30" color="#373637"></u-icon>
							<text>预览</text>
						</view>
						<view class="flex_box flex_direction opt">
							<u-icon name="list" size="30" color="#373637"></u-icon>
							<text>更多</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { user } from '@/common/js/http.api.js';
	let that;
	export default {
		data() {
			return {
				loginStatus: 0,
				userInfo: [],
				list: [
					{
						id: 1,
						name: '可爱卡通宝宝满月宴生日宴派对周岁宴asdfa',
						type: 1,
						image: '/static/test/photo3.png',
						create_time: '2024-07-14 10:39'
					},
					{
						id: 2,
						name: '可爱卡通宝宝满月宴生日宴派对周岁宴asdfa',
						type: 1,
						image: '/static/test/photo3.png',
						create_time: '2024-07-14 10:39'
					}
				]
			}
		},
		methods: {
			toLogin: () => {
				uni.redirectTo({
					url: '/pages/login/login'
				})
			},
			getUserInfo: async () => {
				let userInfo = await user();
				if (userInfo.code == 1) {
					that.userInfo = userInfo.data;
				} else {
					uni.$u.toast(res.msg);
				}
			},
			goBuy: () => {
				uni.navigateTo({
					url: '/pages/pay/pay'
				})
			}
		},
		onLoad() {
			that = this;
			that.loginStatus = uni.getStorageSync('loginStatus');
			that.getUserInfo();
		}
	}
</script>

<style lang="scss">
	.my {
		padding: 0 20rpx;
		.top {
			margin-top: 50rpx;
		}
		.u-reset-button {
			border: none !important;
			display: flex !important;
			height: auto !important;
			flex-direction: column !important;
			width: 100rpx !important;
			margin: 0 !important;
		}
		.idinfo {
			font-size: 24rpx;
			color: rgb(170, 170, 170);
		}
		.middle {
			margin-top: 40rpx;
			.tip-title {
				color: #646566;
				font-size: 24rpx;
				text-align: center;
			}
		}
		.tag-box {
			width: 200rpx;
		}
		.empty-data {
			margin-top:200rpx;
			.make-btn {
				width: 400rpx;
				margin: 40rpx auto 0;
			}
		}
		.make-list {
			background: #f6f6f6;
			padding: 20rpx;
			.item {
				background: #fff;
				border-radius: 20rpx;
				padding:20rpx;
			}
			.title {
				font-size: 40rpx;
				width: 420rpx;
				display: block;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.time {
				color: #888687;
			}
			.bottom {
				margin-top: 20rpx;
				border-top: 5rpx solid #f6f6f6;
				.opt {
					padding: 20rpx 0;
				}
			}
		}
	}
</style>
